<template>
  <div class="task-wrapper">
    <div class="top">
      <span class="level-name">至尊会员</span>
      <span
        class="num"
        @click="$router.push({path: '/my/task/integral-detail'})"
        v-if="designerInfo"
      >
        {{ designerInfo.score }}
        <span class="unit">积分</span>
      </span>
    </div>
    <Scroll class="task-scroll" :data="taskList">
      <div class="content">
        <div class="task-list" v-for="(item ,index) of taskList" :key="index">
          <div class="left">
            <p class="title">{{ item.name }}</p>
            <p class="integral" v-if="item.id === 1">积分 1~3</p>
            <p class="integral" v-if="item.id === 2">
              <span>订单金额每100元</span>
              积分 +1
            </p>
            <p class="integral" v-if="item.id === 3">积分 +10</p>
            <p class="integral" v-if="item.id === 4">积分 +2</p>
            <p class="integral" v-if="item.id === 5">积分 +2</p>
            <p class="integral" v-if="item.id === 7">积分 +5</p>
            <p class="integral" v-if="item.id === 8">积分 +20</p>
            <p class="integral" v-if="item.id === 9">积分 +10</p>
          </div>
          <div class="right" v-if="item.id ===1" @click="punchCardClick(item)">{{punchTitle}}</div>
          <div class="right" v-if="item.id ===2" @click="$router.push('/my/my-custom')">去添加</div>
          <div
            class="right"
            v-if="item.id ===3"
            style="width:1.39rem;height:0.98rem; padding: 0; background: none"
          >
            <img style="width: 100%" src="@/assets/images/ywc.png" alt />
          </div>
          <div class="right" v-if="item.id ===4" @click="$router.push('/my/miniprogram-code')">去邀请</div>
          <div class="right" v-if="item.id ===5" @click="$router.push('/home/activity')">去报名</div>
          <div class="right" v-if="item.id ===7" @click="$router.push('/my/coupon')">去分享</div>
          <div class="right" v-if="item.id ===8" @click="$router.push('/my/miniprogram-code')">去邀请</div>
          <div class="right" v-if="item.id ===9" @click="openScan">去参加</div>
        </div>
      </div>
    </Scroll>
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import Scroll from '@/components/scroll/scroll'
import { getMyTask, punchCard, getJSSDKParams } from '@/api/my'
import MyIntergral from '@/views/my/mixins/edit-msg'
import wx from 'weixin-js-sdk'
const ERR_OK = 200
export default {
  components: {
    Scroll
  },
  mixins: [MyIntergral],
  data () {
    return {
      taskList: [],
      punchTitle: '去打卡'
    }
  },
  created () {
    this._getMyTask().then(res => {
      if (res.code === ERR_OK) {
        res.data.forEach((item, index) => {
          if (item.id === 1 && item.is_sign) {
            this.punchTitle = '已完成'
          }
        })
      }
    })
  },
  mounted () {},
  methods: {
    openScan () {
      // alert(location.href.split('#')[0].split('?t=')[0])
      // 进行签名的时候  Android 不用使用之前的链接， ios 需要
      const url = this.$store.state.app.entryUrl
      this._getJSSDKParams(url).then(res => {
        if (res.code === ERR_OK) {
          const data = res.data
          wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: ['scanQRCode']
          })
          wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            wx.scanQRCode({
              needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
              success: function (res) {
                // var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
              }
            })
          })
        }
      })
    },
    punchCardClick (item) {
      punchCard(item.id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.punchTitle = '已完成'
            this.$toast('打卡成功~')
            this._getDesignerInfo()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getJSSDKParams (url) {
      return getJSSDKParams(url)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getMyTask () {
      return getMyTask()
        .then(res => {
          if (res.code === ERR_OK) {
            this.taskList = res.data
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
@include slideEnter();
.task-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  background: #fff;
  padding: 0 0 0 0.36rem;
  box-sizing: border-box;
  touch-action: none;
  .top {
    width: 100%;
    padding: 0.7rem 0;
    display: flex;
    align-items: center;
    line-height: 0.64rem;
    border-bottom: 1px solid #000400;
    .level-name {
      font-size: 0.36rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(4, 0, 0, 1);
      padding-right: 0.48rem;
      border-right: 1px solid #e6e7e8;
    }
    .num {
      font-size: 0.6rem;
      font-family: Abel;
      font-weight: 400;
      color: rgba(4, 0, 0, 1);
      padding-left: 0.57rem;
      .unit {
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 4, 0, 1);
        line-height: 0.22rem;
      }
    }
  }
  .task-scroll {
    position: absolute;
    top: 2.1rem;
    right: 0;
    left: 0.36rem;
    bottom: 0;
    padding: 0.49rem 0.36rem 0.49rem 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  .content {
    width: 100%;
    .task-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.52rem 0 0.49rem 0;
      border-bottom: 1px solid rgba(0, 4, 0, 0.3);
      &:last-of-type {
        border-bottom: none;
      }
      .left {
        .title {
          font-size: 0.26rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(4, 0, 0, 1);
        }
        .integral {
          font-size: 0.26rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          margin-top: 0.32rem;
        }
      }
      .right {
        padding: 0.22rem 0.24rem;
        font-size: 0.26rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 4, 0, 1);
        background: rgba(233, 233, 233, 1);
      }
    }
  }
}
</style>
